import React, { memo, Component } from 'react'
import { Image, Avatar, Button, Input, Select, message } from 'antd'
import { getClassLevel,setClassLevel } from '@/api'
import { StudentInfo } from '../../utils/model'
import './index.css'
import { baseUrl } from '../../assets/baseUrl'
import { Table } from 'antd'
// import {getUserInfo,getSchoollist,getClasslist,setMyBasicInfo} from '@/api/user'
const BaseUrl = baseUrl()
const { Option } = Select

const detailColumns = [
  {
    title: '权限等级',
    dataIndex: 'level',
    align: 'center'
  },
  {
    title: '青年大学习一键提醒',
    align: 'center',
    render: (row, item, index) => {
      return item.level > 5 ? '√' : ''
    }
  },
  {
    title: '修改班级公告',
    align: 'center',
    render: (row, item, index) => {
      return item.level > 7 ? '√' : ''
    }
  },
  {
    title: '修改支部名称',
    align: 'center',
    render: (row, item, index) => {
      return item.level > 8 ? '√' : ''
    }
  },
  {
    title: '班级权限指派',
    align: 'center',
    render: (row, item, index) => {
      return item.level > 9 ? '√' : ''
    }
  }
]
const detailData = [{ level: 10 }, { level: 9 }, { level: 8 }, { level: 7 }]
class ClassPermission extends Component {
  static contextType = StudentInfo
  constructor(props) {
    super(props)
    this.state = {
      data: [], //班级权限列表
      pageSize: 10,
      pageNum: 1,
      total: null,
      orderMethod: '', //排序方式
      hoverWhich: null, //hover时改为下拉选择
    }
  }

  componentDidMount() {
    this.getList()
  }

  getList = () => {
    const { pageNum, pageSize, orderMethod } = this.state
    getClassLevel({ pageNum, pageSize, orderMethod }).then((res) => {
      const { pagination, data } = res?.data
      this.setState({
        data: data,
        total: pagination?.total,
        studentId: this.context?.studentInfo?.studentId
      })
    })
  }

  changeTable = (pagination, filters, sorter, extra) => {
    this.setState(
      {
        hoverWhich:null,
        orderMethod: sorter.order
      },
      () => this.getList()
    )
  }

  hoverIn =(index) => {
    this.setState({
      hoverWhich: index
    })
  }

  changeLevel=(e,row)=>{
    this.setState({
      hoverWhich:null,
    },()=>{
      setClassLevel({hisStudentId:row.studentId,setLevel:e}).then(res=>{
        if(res.data.result == 'fail')
          message.error(res.data.message)
          else{
            message.success(`成功将${row.realName?row.realName:'未实名'}用户等级设置为${e}`)
            this.getList()
          }
      })
    })
  }

  render() {
    const { data, studentId } = this.state

    const columns = [
      {
        title: '姓名',
        dataIndex: 'realName',
        align: 'center',
        render: (row, item, index) => {
          return item.realName ? (
            item.realName
          ) : (
            <span style={{ color: '#fa346f' }}>未实名</span>
          )
        }
      },
      {
        title: 'UID',
        dataIndex: 'studentId',
        align: 'center'
      },
      {
        title: '昵称',
        dataIndex: 'nickName',
        align: 'center'
      },
      {
        title: '权限等级',
        dataIndex: 'level',
        align: 'center',
        //   defaultSortOrder: 'descend',
        sorter: (a, b) => a.level - b.level,
        render: (row, item, index) => {
          const { hoverWhich } = this.state
          return <div onMouseEnter={this.hoverIn.bind(this,index)}>{hoverWhich == index && item?.studentId != studentId ? <div>
            <Select defaultValue={item.level} style={{ width: 120,paddingLeft:12 }} onChange={e=>this.changeLevel(e,item)}>
              {
                [10,9,8,7,6,5,4,3,2,1].map(item=>{
                  return (
                    <Option value={item} key={item}>{item}</Option>
                  )
                })
              }
            </Select>
          </div> : <div style={{width:120,textAlign:'center',margin:'0 auto',height:32,lineHeight:'32px'}}>{item.level}</div>}</div>
        }
      }
    ]

    //分页器
    const pagination = {
      current: this.state.pageNum,
      pageSize: this.state.pageSize,
      onChange: (e) => {
        this.setState(
          {
            pageNum: e
          },
          () => {
            this.getList()
          }
        )
      },
      total: this.state.total
    }

    return (
      <div className="setting-opration permission">
        <div className="class_permission">
          <div className="outer-dot-box">
            <div className="dot-box-title classPermission-icon">
              班级权限指派
            </div>
            <Table
              columns={columns}
              dataSource={data}
              onChange={this.changeTable.bind(this)}
              locale={{
                cancelSort: '点击取消排序',
                triggerAsc: '点击升序',
                triggerDesc: '点击降序'
              }}
              pagination={pagination}
            />
          </div>
          <div className="outer-dot-box">
            <div className="dot-box-title shuoming">班级权限说明</div>
            <Table columns={detailColumns} dataSource={detailData} />
          </div>
        </div>
      </div>
    )
  }
}
export default memo(ClassPermission)
